<template>
  <div class="dashboard">
<!--    <header class="dashboard-header">-->
<!--      <h1>数据看板</h1>-->
<!--      <div class="time-selector">-->
<!--        <span>时间范围：</span>-->
<!--        <select v-model="timeRange">-->
<!--          <option value="day">今日</option>-->
<!--          <option value="week">本周</option>-->
<!--          <option value="month">本月</option>-->
<!--          <option value="year">今年</option>-->
<!--        </select>-->
<!--      </div>-->
<!--    </header>-->

    <div class="dashboard-grid">
      <!-- 顶部卡片 -->
      <div class="stat-cards-container">
        <div class="stat-card">
          <div class="stat-icon">
            <FileText class="icon" />
          </div>
          <div class="stat-content">
            <div class="stat-title">文章总发布量</div>
            <div class="stat-value">{{ formatNumber(stats.totalArticles) }}</div>
            <div class="stat-trend up">
              <TrendingUp class="trend-icon" />
              <span>{{ stats.articleGrowth }}%</span>
            </div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">
            <DollarSign class="icon" />
          </div>
          <div class="stat-content">
            <div class="stat-title">销售额总量</div>
            <div class="stat-value">¥{{ formatNumber(stats.totalSales) }}</div>
            <div class="stat-trend up">
              <TrendingUp class="trend-icon" />
              <span>{{ stats.salesGrowth }}%</span>
            </div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">
            <ShoppingCart class="icon" />
          </div>
          <div class="stat-content">
            <div class="stat-title">订单量</div>
            <div class="stat-value">{{ formatNumber(stats.totalOrders) }}</div>
            <div class="stat-trend up">
              <TrendingUp class="trend-icon" />
              <span>{{ stats.orderGrowth }}%</span>
            </div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">
            <AlertTriangle class="icon" />
          </div>
          <div class="stat-content">
            <div class="stat-title">灾害发生总量</div>
            <div class="stat-value">{{ formatNumber(stats.totalDisasters) }}</div>
            <div class="stat-trend down">
              <TrendingDown class="trend-icon" />
              <span>{{ stats.disasterGrowth }}%</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 主要内容区域 - 三列布局 -->
      <div class="main-content">
        <!-- 左侧图表 -->
        <div class="left-charts">
          <div class="chart-container">
            <h3>文章月发布量</h3>
            <div ref="articleChart" class="chart"></div>
          </div>
          
          <div class="chart-container">
            <h3>灾害月发布量</h3>
            <div ref="disasterChart" class="chart"></div>
          </div>
        </div>
        
        <!-- 中间地图 -->
        <div class="center-map">
          <div class="chart-container wide">
            <h3>灾害、文章地图分布</h3>
            <div ref="mapChart" class="chart map-chart"></div>
          </div>
        </div>
        
        <!-- 右侧图表 -->
        <div class="right-charts">
          <div class="chart-container">
            <h3>不同灾害类型比重</h3>
            <div ref="disasterTypeChart" class="chart"></div>
          </div>
          
          <div class="chart-container">
            <h3>用户活跃度趋势</h3>
            <div ref="userActivityChart" class="chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import * as echarts from 'echarts';
import { FileText, DollarSign, ShoppingCart, AlertTriangle, TrendingUp, TrendingDown } from 'lucide-vue-next';
import chinaJson from './china.json'; // 假设你有中国地图的GeoJSON数据

// 图表引用
const articleChart = ref(null);
const disasterChart = ref(null);
const disasterTypeChart = ref(null);
const mapChart = ref(null);
const userActivityChart = ref(null);

// 时间范围选择
const timeRange = ref('month');

// 统计数据
const stats = reactive({
  totalArticles: 12458,
  articleGrowth: 15.2,
  totalSales: 1245800,
  salesGrowth: 12.5,
  totalOrders: 8562,
  orderGrowth: 8.7,
  totalDisasters: 256,
  disasterGrowth: -5.3
});

// 格式化数字
const formatNumber = (num) => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

// 初始化图表
onMounted(() => {
  // 注册中国地图
  echarts.registerMap('china', chinaJson);

  // 初始化所有图表
  initArticleChart();
  initDisasterChart();
  initDisasterTypeChart();
  initMapChart();
  initUserActivityChart();

  // 窗口大小变化时重新调整图表大小
  window.addEventListener('resize', () => {
    charts.forEach(chart => chart.resize());
  });
});

// 存储所有图表实例以便于统一管理
const charts = [];

// 初始化文章月发布量图表
const initArticleChart = () => {
  const chart = echarts.init(articleChart.value);
  charts.push(chart);

  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
  const data = [820, 932, 901, 934, 1290, 1330, 1320, 1450, 1520, 1600, 1450, 1380];

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#eee'
        }
      }
    },
    series: [{
      name: '文章发布量',
      type: 'bar',
      data: data,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      }
    }]
  };

  chart.setOption(option);
};

// 初始化灾害月发布量图表
const initDisasterChart = () => {
  const chart = echarts.init(disasterChart.value);
  charts.push(chart);

  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
  const data = [25, 20, 18, 35, 28, 32, 40, 42, 28, 20, 15, 12];

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#eee'
        }
      }
    },
    series: [{
      name: '灾害发布量',
      type: 'line',
      data: data,
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      itemStyle: {
        color: '#ff7675'
      },
      lineStyle: {
        color: '#ff7675',
        width: 3
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(255, 118, 117, 0.5)' },
          { offset: 1, color: 'rgba(255, 118, 117, 0.1)' }
        ])
      }
    }]
  };

  chart.setOption(option);
};

// 初始化灾害类型比重图表
const initDisasterTypeChart = () => {
  const chart = echarts.init(disasterTypeChart.value);
  charts.push(chart);

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      data: ['地震', '洪水', '台风', '干旱', '火灾', '其他']
    },
    series: [
      {
        name: '灾害类型',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 35, name: '地震' },
          { value: 28, name: '洪水' },
          { value: 22, name: '台风' },
          { value: 15, name: '干旱' },
          { value: 12, name: '火灾' },
          { value: 8, name: '其他' }
        ]
      }
    ]
  };

  chart.setOption(option);
};

// 初始化地图分布图表
const initMapChart = () => {
  const chart = echarts.init(mapChart.value);
  charts.push(chart);

  // 模拟数据
  const disasterData = [
    { name: '北京', value: 15 },
    { name: '天津', value: 12 },
    { name: '上海', value: 8 },
    { name: '重庆', value: 25 },
    { name: '河北', value: 18 },
    { name: '山西', value: 10 },
    { name: '辽宁', value: 12 },
    { name: '吉林', value: 8 },
    { name: '黑龙江', value: 10 },
    { name: '江苏', value: 20 },
    { name: '浙江', value: 22 },
    { name: '安徽', value: 15 },
    { name: '福建', value: 18 },
    { name: '江西', value: 12 },
    { name: '山东', value: 14 },
    { name: '河南', value: 16 },
    { name: '湖北', value: 22 },
    { name: '湖南', value: 18 },
    { name: '广东', value: 25 },
    { name: '广西', value: 20 },
    { name: '海南', value: 8 },
    { name: '四川', value: 30 },
    { name: '贵州', value: 15 },
    { name: '云南', value: 18 },
    { name: '西藏', value: 5 },
    { name: '陕西', value: 12 },
    { name: '甘肃', value: 10 },
    { name: '青海', value: 6 },
    { name: '宁夏', value: 5 },
    { name: '新疆', value: 8 }
  ];

  const articleData = [
    { name: '北京', value: 150 },
    { name: '天津', value: 120 },
    { name: '上海', value: 180 },
    { name: '重庆', value: 125 },
    { name: '河北', value: 80 },
    { name: '山西', value: 70 },
    { name: '辽宁', value: 90 },
    { name: '吉林', value: 60 },
    { name: '黑龙江', value: 65 },
    { name: '江苏', value: 200 },
    { name: '浙江', value: 220 },
    { name: '安徽', value: 110 },
    { name: '福建', value: 130 },
    { name: '江西', value: 90 },
    { name: '山东', value: 140 },
    { name: '河南', value: 120 },
    { name: '湖北', value: 150 },
    { name: '湖南', value: 130 },
    { name: '广东', value: 250 },
    { name: '广西', value: 100 },
    { name: '海南', value: 60 },
    { name: '四川', value: 180 },
    { name: '贵州', value: 85 },
    { name: '云南', value: 95 },
    { name: '西藏', value: 30 },
    { name: '陕西', value: 110 },
    { name: '甘肃', value: 70 },
    { name: '青海', value: 40 },
    { name: '宁夏', value: 35 },
    { name: '新疆', value: 55 }
  ];

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        const disasterValue = disasterData.find(item => item.name === params.name)?.value || 0;
        const articleValue = articleData.find(item => item.name === params.name)?.value || 0;
        return `${params.name}<br/>灾害数量: ${disasterValue}<br/>文章数量: ${articleValue}`;
      }
    },
    visualMap: [
      {
        show: true,
        type: 'piecewise',
        min: 0,
        max: 30,
        left: 'right',
        top: 'top',
        text: ['灾害数量'],
        seriesIndex: 0,
        inRange: {
          color: ['#ffeda0', '#feb24c', '#f03b20']
        }
      }
    ],
    geo: {
      map: 'china',
      roam: true,
      emphasis: {
        itemStyle: {
          areaColor: '#87CEFA',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    },
    series: [
      {
        name: '灾害数量',
        type: 'map',
        geoIndex: 0,
        data: disasterData
      },
      {
        name: '文章数量',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: articleData.map(item => {
          const geoCoord = getGeoCoord(item.name);
          if (geoCoord) {
            return {
              name: item.name,
              value: [...geoCoord, item.value / 5], // 缩小文章数量以适应显示
            };
          }
          return null;
        }).filter(item => item !== null),
        symbolSize: function(val) {
          return val[2];
        },
        encode: {
          value: 2
        },
        label: {
          formatter: '{b}',
          position: 'right',
          show: false
        },
        itemStyle: {
          color: '#4992ff'
        },
        emphasis: {
          label: {
            show: true
          }
        }
      }
    ]
  };

  chart.setOption(option);
};

// 添加用户活跃度图表
const initUserActivityChart = () => {
  const chart = echarts.init(userActivityChart.value);
  charts.push(chart);

  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
  const data = [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330];

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#eee'
        }
      }
    },
    series: [{
      name: '用户活跃度',
      type: 'line',
      data: data,
      smooth: true,
      symbol: 'emptyCircle',
      symbolSize: 8,
      itemStyle: {
        color: '#42b983'
      },
      lineStyle: {
        color: '#42b983',
        width: 3
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(66, 185, 131, 0.5)' },
          { offset: 1, color: 'rgba(66, 185, 131, 0.1)' }
        ])
      }
    }]
  };

  chart.setOption(option);
};

// 模拟获取地理坐标的函数
// 实际应用中应该有一个完整的地理坐标映射表
function getGeoCoord(name) {
  const geoCoordMap = {
    '北京': [116.4551, 40.2539],
    '上海': [121.4648, 31.2891],
    '广州': [113.5107, 23.2196],
    '深圳': [114.5435, 22.5439],
    '成都': [104.0668, 30.5728],
    '重庆': [107.7539, 30.1904],
    '天津': [117.4219, 39.4189],
    '杭州': [120.2052, 30.2526],
    '西安': [108.9402, 34.3416],
    '武汉': [114.3896, 30.6628],
    '南京': [118.8062, 31.9208],
    '郑州': [113.4668, 34.6234],
    '长沙': [112.9351, 28.2277],
    '福州': [119.4543, 25.9222],
    '济南': [117.1582, 36.8701],
    '广东': [113.12244, 23.009505],
    '四川': [104.065735, 30.659462],
    '江苏': [118.767413, 32.041544],
    '浙江': [120.153576, 30.287459],
    '河南': [113.665412, 34.757975],
    '河北': [114.502461, 38.045474],
    '山东': [117.000923, 36.675807],
    '湖北': [114.298572, 30.584355],
    '湖南': [112.982279, 28.19409],
    '辽宁': [123.429096, 41.796767],
    '安徽': [117.283042, 31.86119],
    '黑龙江': [126.642464, 45.756967],
    '广西': [108.320004, 22.82402],
    '陕西': [108.948024, 34.263161],
    '山西': [112.549248, 37.857014],
    '新疆': [87.617733, 43.792818],
    '吉林': [125.3245, 43.886841],
    '云南': [102.712251, 25.040609],
    '贵州': [106.713478, 26.578343],
    '甘肃': [103.823557, 36.058039],
    '内蒙古': [111.670801, 40.818311],
    '江西': [115.892151, 28.676493],
    '福建': [119.306239, 26.075302],
    '海南': [110.33119, 20.031971],
    '宁夏': [106.278179, 38.46637],
    '青海': [101.778916, 36.623178],
    '西藏': [91.132212, 29.660361]
  };
  return geoCoordMap[name];
}
</script>

<style lang="less" scoped>
.dashboard {
  width: 100%;
  padding: 20px;
  background-color: #f5f7fa;
  
  .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h1 {
      font-size: 24px;
      color: #333;
      margin: 0;
    }
    
    .time-selector {
      display: flex;
      align-items: center;
      
      span {
        margin-right: 10px;
        color: #666;
      }
      
      select {
        padding: 8px 12px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        background-color: white;
        color: #606266;
        outline: none;
        
        &:focus {
          border-color: #409eff;
        }
      }
    }
  }
  
  .dashboard-grid {
    width: 100%;
    
    // 统计卡片容器
    .stat-cards-container {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      gap: 20px;
      
      .stat-card {
        flex: 1;
        background-color: white;
        border-radius: 8px;
        padding: 20px;
        display: flex;
        align-items: center;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s, box-shadow 0.3s;
        
        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          
          &:nth-child(1) {
            background-color: rgba(24, 144, 255, 0.1);
            color: #1890ff;
          }
          
          .icon {
            width: 30px;
            height: 30px;
          }
        }
        
        &:nth-child(1) .stat-icon {
          background-color: rgba(24, 144, 255, 0.1);
          color: #1890ff;
        }
        
        &:nth-child(2) .stat-icon {
          background-color: rgba(82, 196, 26, 0.1);
          color: #52c41a;
        }
        
        &:nth-child(3) .stat-icon {
          background-color: rgba(250, 173, 20, 0.1);
          color: #faad14;
        }
        
        &:nth-child(4) .stat-icon {
          background-color: rgba(245, 34, 45, 0.1);
          color: #f5222d;
        }
        
        .stat-content {
          flex: 1;
          
          .stat-title {
            color: #666;
            font-size: 14px;
            margin-bottom: 5px;
          }
          
          .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
          }
          
          .stat-trend {
            display: flex;
            align-items: center;
            font-size: 12px;
            
            &.up {
              color: #52c41a;
            }
            
            &.down {
              color: #f5222d;
            }
            
            .trend-icon {
              width: 14px;
              height: 14px;
              margin-right: 5px;
            }
          }
        }
      }
    }
    
    // 主要内容区域 - 三列布局
    .main-content {
      display: flex;
      gap: 20px;
      
      // 左侧图表
      .left-charts {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      
      // 中间地图
      .center-map {
        flex: 2;
        
        .map-chart {
          height: 600px; // 增加地图高度
        }
      }
      
      // 右侧图表
      .right-charts {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
    }
    
    // 图表容器
    .chart-container {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
      height: 100%;
      
      h3 {
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 16px;
        color: #333;
        font-weight: 500;
      }
      
      .chart {
        height: 300px;
      }
      
      &.wide {
        grid-column: span 2;
      }
    }
  }
}
</style>